<template>
  <div class="load" v-if="loginLoading">
    <el-icon><Loading /></el-icon>
  </div>
  <div class="outerFrame" v-if="status == 1">
    <div class="header">设备监听管理</div>
    <div class="loginFrame">
      <div class="a1">欢迎登录</div>
      <div class="a21">
        <div :class="input1">
          <div class="icon1 icon11">
            <img class="icon1" mode="widthFix" src="../assets/email1.png" alt="" />
          </div>
          <input
          v-model="emailInputValue"
            class="input1"
            type="text"
            @focus="getfocus"
            @blur="outfocus"
            placeholder="请输入邮箱"
          />
        </div>
      </div>
      <div class="a21 a23">
        <div :class="input2">
          <div class="icon1 icon11">
            <img class="icon1" mode="widthFix" src="../assets/suo.png" alt="" />
          </div>
          <input
          v-model="pwdInputValue"
            class="input1"
            type="password"
            @focus="getfocus1"
            @blur="outfocus1"
            placeholder="请输入密码"
          />
        </div>
      </div>
      <div class="a4">
       <!-- <div class="register" @click="register">注册</div>
        <div class="a44"></div>
        <div class="a43" @click="fogetPwd">忘记密码？</div> -->
      </div>
      <div class="a5 xiaoshoucss noselectcss">
        <div class="a51" @click="loginFlask">登录</div>
      </div>
    </div>
  </div>
  <div class="outerFrame" v-if="status == 2">
    <div class="loginFrame2">
      <!-- div class="a1">注册</div -->
      <div class="a21">
        <div :class="input1">
          <div class="icon1 icon11">
            <img class="icon1" mode="widthFix" src="../assets/email1.png" alt="" />
          </div>
          <input
            v-model="name"
            class="input1"
            type="text"
            @focus="getfocus"
            @blur="outfocus"
            placeholder="请输入姓名"
          />
        </div>
      </div>
      <div class="a21">
        <div :class="input1">
          <div class="icon1 icon11">
            <img class="icon1" mode="widthFix" src="../assets/email1.png" alt="" />
          </div>
          <input
            v-model="registerEmail"
            class="input1"
            type="text"
            @focus="getfocus"
            @blur="outfocus"
            placeholder="请输入邮箱"
          />
        </div>
      </div>
      <div class="a21a">
        <div :class="input3">
          <div class="icon1 icon11">
            <img class="icon1" mode="widthFix" src="../assets/send1.png" alt="" />
          </div>
          <input
            v-model="registerCode"
            class="input1"
            type="text"
            @focus="getfocus2"
            @blur="outfocus2"
            placeholder="请输入验证码"
          />
        </div>
        <button @click="sendCode" class="getCode">{{ maxTime }}</button>
      </div>
      <div class="a21 a23">
        <div :class="input2">
          <div class="icon1 icon11">
            <img class="icon1" mode="widthFix" src="../assets/suo.png" alt="" />
          </div>
          <input
            v-model="registerPwd"
            class="input1"
            type="password"
            @focus="getfocus1"
            @blur="outfocus1"
            placeholder="请输入密码"
          />
        </div>
      </div>
      <div class="a21 a23">
        <div :class="input2b">
          <div class="icon1 icon11">
            <img class="icon1" mode="widthFix" src="../assets/suo.png" alt="" />
          </div>
          <input
            v-model="registerPwdConfirm"
            class="input1"
            type="password"
            @focus="getfocus3"
            @blur="outfocus3"
            placeholder="输入确认密码"
          />
        </div>
      </div>
      <div class="a4">
        <div class="register" @click="back2login">返回登录</div>
        <div class="a44"></div>
        <div class="a43" @click="fogetPwd">忘记密码？</div>
      </div>
      <!-- div class="a52">
        <div class="a51" @click="registerUser">注册</div>
      </div -->
    </div>
  </div>
  <div class="outerFrame" v-if="status == 3">
    <div class="loginFrame2">
      <div class="a1">忘记密码</div>
      <div class="a21">
        <div :class="input1">
          <div class="icon1 icon11">
            <img class="icon1" mode="widthFix" src="../assets/email1.png" alt="" />
          </div>
          <input
            class="input1"
            v-model="forgetEmail"
            type="text"
            @focus="getfocus"
            @blur="outfocus"
            placeholder="请输入邮箱"
          />
        </div>
      </div>
      <div class="a21a">
        <div :class="input3">
          <div class="icon1 icon11">
            <img class="icon1" mode="widthFix" src="../assets/send1.png" alt="" />
          </div>
          <input
            class="input1"
            v-model="forgetCode"
            type="text"
            @focus="getfocus2"
            @blur="outfocus2"
            placeholder="请输入验证码"
          />
        </div>
        <button @click="sendCode" class="getCode">{{ maxTimeForget }}</button>
      </div>
      <div class="a21 a23">
        <div :class="input2">
          <div class="icon1 icon11">
            <img class="icon1" mode="widthFix" src="../assets/suo.png" alt="" />
          </div>
          <input
            v-model="forgetpwdInput2Value"
            class="input1"
            type="password"
            @focus="getfocus1"
            @blur="outfocus1"
            placeholder="请输入密码"
          />
        </div>
      </div>
      <div class="a21 a23">
        <div :class="input2b">
          <div class="icon1 icon11">
            <img class="icon1" mode="widthFix" src="../assets/suo.png" alt="" />
          </div>
          <input
            v-model="forgetpwdInput2ValueConfirem"
            class="input1"
            type="password"
            @focus="getfocus3"
            @blur="outfocus3"
            placeholder="输入确认密码"
          />
        </div>
      </div>
      <div class="a4">
        <div class="register" @click="back2login">返回登录</div>
        <div class="a44"></div>
        <!-- div class="a43" @click="fogetReg">注册</div -->
      </div>
      <div class="a52">
        <div class="a51" @click="forgetPwdFunc">忘记密码</div>
      </div>
    </div>
  </div>
</template>

<script>



export default {
  name: "AiLoginView",
  data() {
    return {
      loginLoading: false,
      forgetpwdInput2ValueConfirem: "",
      forgetpwdInput2Value: "",
      forgetCode: "",
      forgetEmail: "",
      registerPwdConfirm: "",
      registerPwd: "",
      registerCode: "",
      registerEmail: "",
      name: "",
      emailInputValue: "",
      pwdInputValue: "",
      pwdInput2Value: "",
      pwdInput2ValueConfirem: "",
      input1: "a2",
      input2: "a2",
      input2b: "a2",
      input3: "a2aa",
      status: "1", // 1: 登录 2: 注册 3: 忘记密码
      code: "",
      maxTime: "获取验证码",
      maxTimeForget: "获取验证码",
    };
  },
  methods: {
    async forgetPwdFunc(){
      console.log('forgetPwdFunc');
      if(!this.forgetEmail){
        this.$message.error('请输入邮箱');
        return;
      }
      if(!this.forgetCode){
        this.$message.error('请输入验证码');
        return;
      }
      if(!this.forgetpwdInput2Value){
        this.$message.error('请输入密码');
        return;
      }
      if(!this.forgetpwdInput2ValueConfirem){
        this.$message.error('请输入确认密码');
        return;
      }
      if(this.forgetpwdInput2Value != this.forgetpwdInput2ValueConfirem){
        this.$message.error('密码不一致');
        return;
      }
      // this.forgetLoading = true;
      
      const response = await this.$axios.put(this.$apiBaseUrl+'/api/users', {
      // const response = await this.$axios.put('http://www.inf-share.com:9000/api/users', {
          headers: {
            'Content-Type': 'application/json'
          },
          data: JSON.stringify({
            email: this.forgetEmail,
            code: this.forgetCode,
            pwd: this.forgetpwdInput2Value,
            pwdConfirm: this.forgetpwdInput2ValueConfirem,
          })
      })
      if(response.data.errorMsg){ 
        this.$message({
          message: response.data.errorMsg,
          type: 'error'
        });
      }else{
        this.$message({
          message: response.data.message,
          type: 'success'
        });
        this.status = 1;
      }
    },
   async registerUser() {
      
      if(!this.registerPwdConfirm){
        this.$message({
          message: "请输入确认密码",
          type: 'error'
        });
        return;
      }
      if(!this.registerPwd){
        this.$message({
          message: "请输入密码",
          type: 'error'
        });
        return;
      }
      if(!this.name){
        this.$message({
          message: "请输入姓名",
          type: 'error'
        });
        return;
      }
      if(!this.name){
        this.$message({
          message: "请输入姓名",
          type: 'error'
        });
        return;
      }
      if(!this.registerCode){
        this.$message({
          message: "请输入验证码",
          type: 'error'
        });
        return;
      }
      if(!this.registerEmail){
        this.$message({
          message: "请输入邮箱",
          type: 'error'
        });
        return;
      }

      const response = await this.$axios.post(this.$apiBaseUrl+'/api/users', {
      // const response = await this.$axios.post('http://www.inf-share.com:9000/api/users', {
          headers: {
            'Content-Type': 'application/json'
          },
          data: JSON.stringify({
            email: this.registerEmail,
            pwd: this.registerPwd,
            pwdConfirm: this.registerPwdConfirm,
            name: this.name,
            code: this.registerCode
          })
      })
      if(response.data.errorMsg){ 
        this.$message({
          message: response.data.errorMsg,
          type: 'error'
        });
      }else{
        this.$message({
          message: '注册成功',
          type: 'success'
        });
        this.status = 1;
      }





    },

    async loginFlask() {
      this.loginLoading = true;
      try {
        const response = await this.$axios.post(this.$apiBaseUrl+'/api/login', {
        // const response = await this.$axios.get(this.$apiBaseUrl+'/mqtt/subscribedTopics', {
          headers: {
            'Content-Type': 'application/json'
          },
            userName: this.emailInputValue,
            passWord: this.pwdInputValue
        });
        console.log('response', response);
        console.log('Authorization', response.headers['authorization']);
        
        if (!response.data.errorMsg) {
          sessionStorage.setItem('user', JSON.stringify(response.data.data));
          const token = response.headers['token'];
          if (token) {
            sessionStorage.setItem('token', token);
          }
          this.$message({
            message: '登录成功',
            type: 'success'
          });
          this.$router.push("/TopicManager");
        } else {
          this.$message({
            message: response.data.errorMsg,
            type: 'error'
          });
        }
      } catch (error) {
        console.error('登录请求失败:', error);
        this.$message({
          message: '登录失败',
          type: 'error'
        });
      }finally{
        this.loginLoading = false;
      }
    },
    async sendCode() {
      let email = "";
      let type = "";
      if(this.status == 2){        
        if(!this.registerEmail){
          this.$message({
            message: "请输入邮箱",
            type: 'error'
          });
          return;
        }
        email = this.registerEmail
        type = "registerEmail"
      }
      if(this.status == 3){
        if(!this.forgetEmail){
          this.$message({
            message: "请输入邮箱",
            type: 'error'
          });
          return;
        }
        email = this.forgetEmail
        type = "forgetPwd"
        
      }
      if (this.maxTime == "获取验证码") {
        console.log("sendCode");

        const response = await this.$axios.post(this.$apiBaseUrl+'/api/send_email', {
        // const response = await this.$axios.post('http://www.inf-share.com:9000/send_email', {
          headers: {
            'Content-Type': 'application/json'
          },
          data: JSON.stringify({
            email: email,
            type: type
          }) 
        });
        console.log('response:',response);
        
        if(!response.data.errorMsg){
          if(this.status == 2){
            // 获取6位随机数字
            this.maxTime = 60;
            let timer = setInterval(() => {
              this.maxTime--;
              if (this.maxTime == 0) {
                this.maxTime = "获取验证码";
                clearInterval(timer);
              }
            }, 1000);
          }
          if(this.status == 3){
            // 获取6位随机数字
            this.maxTimeForget = 60;
            let timer = setInterval(() => {
              this.maxTimeForget--;
              if (this.maxTimeForget == 0) {
                this.maxTimeForget = "获取验证码";
                clearInterval(timer);
              }
            }, 1000);
          }

          this.$message({
            message: response.data.message,
            type: 'success'
          });
        }else{
          this.$message({
            message: response.data.errorMsg,
            type: 'error'
          });

        }



      }
    },
    back2login() {
      this.status = "1";
      this.emailInputValue = ''
      this.pwdInputValue = ''
    },
    fogetPwd() {
      this.status = "3";
      this.forgetpwdInput2ValueConfirem = "";
      this.forgetpwdInput2Value = "";
      this.forgetCode = "";
      this.forgetEmail = "";
    },
    register() {
      this.status = "2";
      this.name = "";
      this.registerEmail = "";
      this.registerCode = "";
      this.registerPwd = "";
      this.registerPwdConfirm = "";
    },
    fogetReg() {
      this.status = "2";
      this.name = "";
      this.registerEmail = "";
      this.registerCode = "";
      this.registerPwd = "";
      this.registerPwdConfirm = "";
    },
    getfocus() {
      this.input1 = "a22";
    },
    outfocus() {
      this.input1 = "a2";
    },
    getfocus2() {
      this.input3 = "a22aa";
    },
    outfocus2() {
      this.input3 = "a2aa";
    },
    getfocus1() {
      this.input2 = "a22";
    },
    outfocus1() {
      this.input2 = "a2";
    },
    getfocus3() {
      this.input2b = "a22";
    },
    outfocus3() {
      this.input2b = "a2";
    },
  },
  mounted() {},
};
</script>

<style>
.load {
  position: absolute;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.3); /* 添加半透明背景 */
  z-index: 9999; /* 确保在最上层 */
}

/* 添加旋转动画 */
@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* 应用动画到图标 */
.load .el-icon {
  animation: rotate 1.5s linear infinite;
  font-size: 48px;
  /* color: #409eff; */
}
.outerFrame {
  background: url(../assets/bg.jpeg) no-repeat;
  background-size: cover;
  width: 100vw;
  height: 100vh;
  background-color: rgb(243, 243, 243);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.header {
  color: #fff;
  font-size: 36px;
  font-weight: 900;
  user-select: none;
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE/Edge */
}
.loginFrame {
  background-color: #fff;
  margin-top: 65px;
  width: 500px;
  height: 360px;
  border-radius: 20px;
  box-shadow: 12px 12px 14px 0px rgba(214, 214, 214, 0.3);
}
.loginFrame2 {
  background-color: #fff;
  /* margin-top: 65px; */
  width: 500px;
  /* height: 360px; */
  border-radius: 20px;
  box-shadow: 12px 12px 14px 0px rgba(214, 214, 214, 0.3);
}
.a1 {
  font-size: 24px;
  font-weight: 700;
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 34px 0;
  user-select: none;
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE/Edge */
}
.a21a {
  margin-top: 20px;
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: center;
  user-select: none;
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE/Edge */
}
.a21 {
  width: 100%;
  display: flex;
  justify-content: center;
  user-select: none;
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE/Edge */
}
.a2aa {
  display: flex;
  width: 333px;
  height: 50px;
  border: 1px solid #d4d4d4;
  border-radius: 10px;
  overflow: hidden;
}
.a22aa {
  display: flex;
  width: 333px;
  height: 50px;
  border: 2px solid #bcc0ff;
  border-radius: 10px;
  overflow: hidden;
}
.a2 {
  display: flex;
  width: 416px;
  height: 50px;
  border: 1px solid #d4d4d4;
  border-radius: 10px;
  overflow: hidden;
}
.a22 {
  display: flex;
  width: 416px;
  height: 50px;
  border: 2px solid #bcc0ff;
  border-radius: 10px;
  overflow: hidden;
}
.icon1 {
  width: 16px;
  user-select: none;
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE/Edge */
}
.icon11 {
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.a23 {
  margin-top: 20px;
}
.a4 {
  height: 50px;
  width: 100%;
  display: flex;
  align-items: center;
}
.a41 {
  margin-left: 42px;
}
.a42 {
  margin-left: 10px;
  font-size: 15px;
}
.a43 {
  margin-right: 42px;
  font-size: 15px;
  user-select: none;
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE/Edge */
  cursor: pointer;
  text-decoration: underline;
  color: #1a73e8;
  font-size: 15px;
  margin-left: 10px;
}
.a44 {
  flex: 1;
}
.a52 {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}
.a5 {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: center;
}
.a51:hover { 
    background-color:rgb(0, 91, 209);
}
.a51 {
  width: 416px;
  border-radius: 10px;
  background-color: #1a73e8;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
}
.input1 {
  flex: 1;
  border: none;
  outline: none;

  user-select: none;
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE/Edge */
}
.register {
  text-decoration: underline;
  color: #1a73e8;
  font-size: 15px;
  margin-left: 10px;
  /* // 鼠标移动上去后显示小手 */
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE/Edge */
  margin-left: 42px;
}
.getCode {
  margin-left: 10px;
  width: 75px;
  height: 100%;
  background-color: #1a73e8;
  border: none;
  border-radius: 10px;
  color: #fff;
  font-size: 12px;
}
</style>
